<!--
 * @Author: zl
 * @Date: 2021-02-09 15:24:23
 * @LastEditTime: 2021-11-30 18:35:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\layoutpages\system\components\usersEdit.vue
-->
<template>
    <el-dialog
        :title="title"
        append-to-body
        destroy-on-close
        :model-value="showDialog"
        @close="closeDialog()"
    >
        <!-- <span>{{ rowData }}</span> -->
        <!-- 表单 -->
        <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            label-width="80px"
            :inline="false"
        >
            <el-form-item label="名称" prop="couponName">
                <el-input
                    v-model="couponName"
                    placeholder="优惠券名称"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="适用店铺" prop="storeCode">
                <el-select
                    style="width: 100%"
                    v-model="storeCode"
                    placeholder="请选择店铺"
                    clearable
                >
                    <el-option
                        v-for="item in payStores"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="满减金额" prop="minMoney">
                <el-input
                    v-model="minMoney"
                    :oninput="(minMoney = inputNum(minMoney))"
                    placeholder="满减金额"
                    clearable
                >
                </el-input>
            </el-form-item>
            <el-form-item label="折扣券" prop="payNums">
                <el-input
                    v-model="payNums"
                    :oninput="(payNums = inputNum(payNums))"
                    placeholder="优惠券额度"
                    clearable
                >
                </el-input>
            </el-form-item>
            <el-form-item label="类型" prop="couponType">
                <el-select
                    style="width: 100%"
                    v-model="couponType"
                    placeholder="优惠券类型"
                    clearable
                >
                    <el-option
                        v-for="item in dicList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                    style="width: 100%"
                    v-model="startTime"
                    type="date"
                    placeholder="选择开始时间"
                    value-format="YYYY-MM-DD"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                    style="width: 100%"
                    v-model="endTime"
                    type="date"
                    placeholder="选择结束时间"
                    value-format="YYYY-MM-DD"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="status">
                    <el-radio-button :label="1">未发布</el-radio-button>
                    <el-radio-button :label="2">已发布</el-radio-button>
                    <el-radio-button :label="3">已停止</el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-form>

        <template v-slot:footer>
            <span>
                <el-button @click="closeDialog()">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import {
    reactive,
    toRefs,
    ref,
    onMounted,
    defineProps,
    defineEmits,
} from "vue";
const rules = {
    couponName: [
        {
            required: true,
            message: "请输入优惠券名称",
            trigger: "blur",
        },
    ],
    storeCode: [
        {
            required: true,
            message: "请选择店铺名称",
            trigger: "blur",
        },
    ],
    minMoney: [
        {
            required: true,
            message: "请输入满减金额",
            trigger: "blur",
        },
    ],
    payNums: [
        {
            required: true,
            message: "请输入优惠券额度",
            trigger: "blur",
        },
    ],
    couponType: [
        {
            required: true,
            message: "请选择优惠券类型",
            trigger: "blur",
        },
    ],
    startTime: [
        {
            required: true,
            message: "请选择优惠券开始时间",
            trigger: "blur",
        },
    ],
    endTime: [
        {
            required: true,
            message: "请选择优惠券结束时间",
            trigger: "blur",
        },
    ],
};
const props = defineProps({
    showDialog: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "添加",
    },
    rowData: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(["closeDialog"]);
const { title, rowData } = toRefs(props);
const closeDialog = () => {
    emit("closeDialog", false);
};
const formRef = ref(null);
const dicList = ref([]);
const payStores = ref([]);

const form = reactive({
    couponName: "",
    payNums: 0.0,
    minMoney: 0.0,
    couponType: "",
    startTime: "",
    endTime: "",
    status: 1,
    storeCode: "",
    userId: sessionStorage.getItem("unameid"),
});
const {
    couponName,
    minMoney,
    payNums,
    couponType,
    startTime,
    endTime,
    status,
    storeCode,
} = toRefs(form);

/**
 * @description: 初始化
 * @param {*}
 * @return {*}
 */
rowData.value &&
    ((couponName.value = rowData.value.couponName),
    (minMoney.value = rowData.value.minMoney),
    (payNums.value = rowData.value.payNums),
    (couponType.value = rowData.value.couponType),
    (startTime.value = rowData.value.startTime),
    (endTime.value = rowData.value.endTime),
    (storeCode.value = rowData.value.storeCode),
    (status.value = rowData.value.status));
/**
 *
 * 判断输入商品价格
 */
const inputNum = (value) => {
    let regExp = new RegExp("^[0-9]+\\.?[0-9]*$");
    let b = regExp.test(value);
    if (b) {
        return value;
    }
};
/**
 * @description: 获取字典项类型
 * @param {*}
 * @return {*}
 */
const getDicList = async (dicCode) => {
    const { code, data } = await VE_API.system.dictionaryEntityByCode({
        dicCode: dicCode,
    });
    if (code == "00") {
        dicList.value = data;
    }
    dicList.value = data;
};
/**
 * @description: 获取字典项类型
 * @param {*}
 * @return {*}
 */
const getPayStores = async (userId) => {
    const { code, data } = await VE_API.system.payStores({
        userId: userId,
    });
    if (code == "00") {
        payStores.value = data;
    }
    payStores.value = data;
};
/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let res;
            if (title.value == "添加") {
                res = await VE_API.system.payCouponAdd(form);
            } else {
                form.userId = null;
                res = await VE_API.system.payCouponEdit({
                    id: rowData.value.id,
                    ...form,
                });
            }
            const { code } = res;
            if (code == "00") {
                closeDialog();
            }
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};
onMounted(async () => {
    await getPayStores(form.userId);
    await getDicList("yhqlx");
});
</script>

<style lang="scss" scoped></style>
